
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
import { Button, Menu } from 'antd';
import React, { useEffect, useState } from 'react'
import styles from './index.module.scss'
import ManageUser from './Users';
import ManagePublic from './Public';
import Admin from './Admin';
import { useNavigate } from 'react-router-dom';
import { getLs } from '@/common/common';
export default function ManageHome() {
  const [selectedKey, setSelectedKey] = useState('1'); // 默认选中未审核作品
  const navigate = useNavigate()
  const [items,setItems] = useState([
    { key: '1', label: '未审核作品' },
    { key: '2', label: '已驳回作品' },
    { key: '3', label: '已审核作品' },
    { key: '4', label: '用户管理' },
    { key: '5', label: '管理员列表' },
    { key: '6', label: '退出登录' },
  ])
  useEffect(() => {
    const adminInfo = getLs('admin')
    if (!adminInfo) {
      navigate('/manageLogin')
      return
    }
    if (adminInfo.role === "0") {
      setItems(items.filter(ele=>ele.key !== '5' && ele.key !== '4'))
    }
  },[])
  useEffect(() => {
    if (selectedKey === "6") {
      navigate("/ManageLogin")
    }
  },[selectedKey])
  return (
    <div className={styles.bigDiv}>
      <div className={styles.title}>
        <h3>趣纷享后台管理系统</h3>
        <a onClick={()=>navigate("/login")}>点击前往趣纷享</a>
      </div>
     <div className={styles.container}>
      <div className={styles.left} style={{ width: 256 }}>
        <Menu
          defaultSelectedKeys={['1']}
          defaultOpenKeys={['sub1']}
          mode="inline"
          theme="dark"
          inlineCollapsed={false}
          items={items}
          onClick={(e) => setSelectedKey(e.key)} // 处理菜单点击事件
        />
        </div>
      <div className={styles.right}>
        {
          selectedKey==="1"&&<ManagePublic state="1"/>
        }
         {
          selectedKey==="2"&&<ManagePublic state="2"/>
        }
         {
          selectedKey==="3"&&<ManagePublic state="3"/>
        }
         {
          selectedKey==="4"&&<ManageUser state="4"/>
        }
        {
          selectedKey==="5"&&<Admin state="5"/>
        }
        </div>
    </div>
    </div>
  )
}
